<template>
  <div class="pade">
      <goback class="fanhui"></goback>
      <header class="header1">
        <div action="#">
          <input type="text" placeholder="笔记本" v-model="keywords" />
          <span class="ss iconfont icon-sousuo"></span>
        </div>
      </header>
      <ksearch v-if="list.length===0"></ksearch>
      <div class="recommend1-bottom" @click="todetail(item.id)" v-for="item in list" :key="item.id">
        <div class="r-Bbox">
          <img :src="$pre+item.img" alt />
          <div class="bbox-text">
            <h3>{{item.goodsname}}</h3>
            <span>&yen;{{item.price}}</span>
            <div>
              <span>6666评论</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { reqsearch } from "../../http/api";
import ksearch from "./ksearch.vue";
export default {
  components: {
    ksearch,
  },
  data() {
    return {
      list: [],
      keywords: "",
    };
  },
  methods: {
    todetail(index) {
      this.$router.push("/detail/" + index);
    },
  },
  watch: {
    keywords() {
      if (this.keywords == "") {
        this.list = [];
        return;
      }
      reqsearch({
        keywords: this.keywords,
      }).then((res) => {
        console.log(res.data.list);
        this.list = res.data.list ? res.data.list : [];
      });
    },
  },
};
</script>

<style scoped>
.header1 {
  background-image: linear-gradient(180deg, #ff6040, #ff7b68);
  padding: 0.2rem 0.24rem 0.17rem 0.26rem;
}
div {
  position: relative;
}
div input {
  width: 6.7rem;
  height: 0.6rem;
  border: 0.02rem solid #e6e6e6;
  background: #ffffff;
  text-indent: 0.67rem;
  border-radius: 0.05rem;
  font: 0.27rem/0.6rem "微软雅黑";
  color: #999999;
}
div .ss {
  position: absolute;
  left: 0.14rem;
  top: 0.15rem;
  color: #9a9a9a;
}
.header1 div {
  position: relative;
}
.recommend1-bottom {
  margin: 0.2rem;
}
.r-Bbox {
  display: flex;
  height: 2.5rem;
}
.r-Bbox img {
  margin: 0.2rem;
  width: 2rem;
  height: 2rem;
}
.bbox-text {
  margin: 0.3rem;
  display: flex;
  flex-direction: column;
  font-size: 0.25rem;
}
.bbox-text span {
  margin: 0.4rem 0;
}
.bbox-text span:nth-child(2) {
  color: red;
}
h3 {
  margin-top: 0.2rem;
}
</style>